<template>
  <div class="to-design">
    <div class=" title">排版选择</div>
    <div class=" options">
      <el-radio-group v-model="layoutSelection">
        <el-radio :value="1">智能排版</el-radio>
        <el-radio :value="2">手动排版</el-radio>
      </el-radio-group>
    </div>
    <!-- 智能排版 -->
    <div class="smart  " v-if="layoutSelection == 1">
      <div class="left">
        <div class=" title">铺设方向优先级设置</div>
        <div class="smart-item"><input type="text" value="1"> <span>主材长边平行门边</span></div>
        <div class="smart-item"><input type="text" value="2"> <span>主材长边垂直门边</span></div>
      </div>
      <div class="right  ">
        <div class=" title">优化方式优先级设置</div>
        <div class="smart-item"><input type="text" value="1"> <span>美观优先级</span></div>
        <div class="smart-item"><input type="text" value="2"> <span>损耗优先级</span></div>
      </div>
    </div>

    <!-- 手动排版 -->
    <div class="hand" v-if="layoutSelection == 2">
      <div class="top">
        <div class=" title">铺设方向选择</div>
        <div class="  radios">
          <el-radio-group v-model="layoutDirection" class="ml-4">
            <el-radio class="radios-item" :value="1">主材长边平行门</el-radio>
            <el-radio class="radios-item" :value="2">主材长边垂直门</el-radio>
          </el-radio-group>

        </div>
      </div>
      <div class="bottom">
        <div class=" title">
          <span>铺设点选择</span>
          <span>请至上图选择生成的起铺点</span>
        </div>
        <div class="check">
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox label="1">以阳角/阴角生成起铺点</el-checkbox>
            <el-checkbox label="2">以区域/边线中心生成起铺点</el-checkbox>
            <el-checkbox label="3">以参照物生成起铺点</el-checkbox>
          </el-checkbox-group>
        </div>

      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import { useData } from "@/hooks/useData";
import { reactive, ref } from "vue"
const props = defineProps<{
  id: any,
  areaId: any
}>()
const layoutSelection = ref(1)
const layoutDirection = ref(1)
const checkedCities = ref<Array<number>>([])
const oldChecked = ref<Array<number>>([])
const { sendData } = useData('')
const handleCheckedCitiesChange = (value: any) => {


  let choose = value.filter(x => oldChecked.value.indexOf(x) == -1);
  let noChoose = oldChecked.value.filter(x => value.indexOf(x) == -1);
  oldChecked.value = value
  console.log("选中的", choose[0] - 1 + '')
  if (choose.length != 0) {
    sendData("Ceiling.CeilingStyle,StartPointChoose", {
      id: props.id,
      startPointType: choose[0] - 1 + '',
      startPointChoose: "1",
    })
  }
  if (noChoose.length != 0) {
    sendData("Ceiling.CeilingStyle,StartPointChoose",
      {
        id: props.id,
        startPointType: noChoose[0] - 1 + '',
        startPointChoose: "0",
      }
    )
  }
  console.log("未选中的", noChoose[0] - 1 + '')
}
const finishDesign = () => {
  sendData("Ceiling.CeilingStyle,LastCeilingPave", {
    isAuto: true,  //智能排版
    area_id: props.areaId,
    paveRuleOrder: [
      0, 1
    ],   //优化方式优先级
    paveDirection: [
      layoutDirection.value
    ],  //铺设方向优先级
    paveStartPoint: [
      layoutDirection.value - 1
    ]   //起铺点选择
  })
}
defineExpose({
  finishDesign
})



</script>
<style lang="scss" scoped>
.to-design {
  color: #333;
  font-family: "PingFang SC";

  .smart {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .smart-item {
      width: 430px;
      height: 28px;
      flex-shrink: 0;
      border-radius: 4px;
      border: 1px solid #E5E7E7;
      background: #F8F9FA;
      color: #000;
      font-family: "PingFang SC";
      font-size: 14px;
      font-weight: 400;

      span {
        margin-left: 5px;
      }
    }

    input {
      width: 28px;
      height: 28px;
      outline: none;
      border: 1px solid #E5E7E7;
      border-radius: 4px;
      padding-left: 9px;
    }



    .right,
    .left {
      margin: 10px 0 0 24px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
    }

    .left {
      margin: 10px 0 0 0;
    }
  }

  .hand {
    .bottom {
      margin-top: 15px;

      .check {
        margin-top: 15px;

        :deep(.el-checkbox) {
          width: 194px;
          height: 32px;
          border-radius: 4px;
          border: 1px solid #E5E7E7;
          padding-left: 8px;


        }

        :deep(.el-checkbox__label) {
          font-size: 12px;
        }
      }

      .title {
        span:nth-child(2) {
          color: #326BFF;
          font-family: "PingFang SC";
          font-size: 12px;
          font-weight: 400;
          background-color: #E8F1FF;
          border-radius: 4px;
          padding: 4px 6px;
          margin-left: 12px;

        }
      }

    }

    .top {
      margin-top: 10px;

      .radios {
        .radio {
          display: flex;
          margin-bottom: 24px;

          ::v-deep(.is-checked) {
            border-color: #E5E7E7;

            .el-checkbox__inner {
              background: #326BFF;
              border-color: #326BFF;
            }

            &:hover {
              border-color: #326BFF;
            }
          }

          ::v-deep(.el-checkbox__label) {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            color: #333;
          }
        }
      }

      .radios {

        :deep(.el-radio-group) {
          display: flex;
          flex-direction: column;

          align-items: flex-start;
        }

        :deep(.el-radio) {
          width: 430px;
          height: 32px;
          flex-shrink: 0;
          border: 1px solid #E5E7E7;
          border-radius: 4px;
          padding-left: 8px;
          margin: 5px 0;
        }
      }
    }
  }

  .title {

    font-size: 16px;
    font-weight: 500;

    .options {
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }
}
</style>